<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <input :value="message" @input="updateMessage2(3333)">
  </el-card>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('demo')

export default {
  props: {
    value: [Array, Object]
  },
  components: {

  },
  data() {
    return {

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState({
      message: state => state.obj.message
    })
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['updateMessage']),
    updateMessage2(e) {
    	console.log(e);
      this.updateMessage(e.target.value);

    }
  }
}

</script>
<style type="text/css" lang="scss">
.box-card {
  margin: 20px;
}

</style>
